import BaseTakePhoto, { BaseTakePhotoRef } from "@/components/composite/BaseTakePhoto"
import { css } from "@emotion/react"
import { useCallback, useState } from "react"
import { useRef } from "react"
import styled from "@emotion/styled"
import { SvgComponent } from "@/components/base/Svg"
import ButtonRegular, { ButtonRegularOutline } from "@/components/composite/ButtonRegular/main"
import { kycForm } from "@/forms"
import KycPageSignals from "@/features_signal/kycPageSignals"

const ActionPart = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 24rem;
    margin: auto;
    width: 100%;
    padding: 0 24rem;
`

const TakePhotoButton = styled(SvgComponent("kyc/button_take_photo.svg"))`
    user-select: none;
    cursor: pointer;
    width: 64rem;
    height: 64rem;
`

export default function StepKycSelfiePhoto() {
    const form = kycForm.useFormContext()
    const [capturedImage, setCapturedImage] = useState<string | null>(null)
    const cameraRef = useRef<BaseTakePhotoRef>(null)
    const handleCaptureImage = useCallback((imageData: string) => {
        setCapturedImage(imageData)
    }, [])

    return (
        <div
            css={css`
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
            `}
        >
            <div
                css={css`
                    max-height: 544rem;
                    display: flex;
                    flex: 1;
                    align-items: stretch;
                    flex-direction: column;
                `}
            >
                <BaseTakePhoto
                    ref={cameraRef}
                    onCaptureImage={handleCaptureImage}
                />
            </div>

            {!capturedImage ? (
                <TakePhotoButton
                    css={css`
                        margin: auto;
                        * {
                            fill: ${capturedImage ? "#021bff" : "#FF4775"};
                        }
                    `}
                    onClick={() => {
                        if (capturedImage) {
                            setCapturedImage(null)
                            cameraRef.current?.restartCamera()
                        } else {
                            cameraRef.current?.takePhoto()
                        }
                    }}
                />
            ) : (
                <ActionPart>
                    <ButtonRegularOutline
                        css={css`
                            flex: 1;
                        `}
                        onClick={() => {
                            setCapturedImage(null)
                            cameraRef.current?.restartCamera()
                        }}
                    >
                        Retake
                    </ButtonRegularOutline>
                    <ButtonRegular
                        css={css`
                            flex: 1;
                        `}
                        onClick={async () => {
                            form.setValue("attachments_selfieWithIDPhotoPath", capturedImage)
                            KycPageSignals.nextStage()
                        }}
                    >
                        Upload
                    </ButtonRegular>
                </ActionPart>
            )}
        </div>
    )
}
